// FRONTEND: This is the frontend UI where we can display the Blog system


<div class="container">
      <h3>Blog | ጦማር</h3>
      <hr>
      <h5>Latest Articles</h5>

      <!--|| BEGIN | BLOG SYSTEM ||-->
     <ul class="blog-mini-posts-list upcoming-events">
    



<!-- ---------------------- END OF PHP SCRIPT  ---------------------- -->

<!-- || ADMIN ZONE || -->
<div class="admin-zone d-flex justify-content-end mb-3" style="position: relative; z-index: 999;">
    <button class="btn btn-link text-muted p-2" onclick="document.getElementById('blog-login').style.display='block'"> <i class="bi bi-shield-lock"></i> <small>Staff Access</small> </button>
  <form id="blog-login" method="POST" class="shadow-lg" style="display:none; position:absolute; right:0; top:30px; background:#1a1a1a; padding:15px; border:1px solid #444; z-index:1000; width: 200px; border-radius: 8px;">
    <input type="hidden" name="admin_login_action" value="1">
    <input type="hidden" name="csrf_token" value="64e4b47b238cb03b6fcf0a38aa9f6257">
    <input type="text" name="user" placeholder="Username" class="form-control form-control-sm mb-2 bg-dark text-white border-secondary" required>
    <input type="password" name="pass" placeholder="Password" class="form-control form-control-sm mb-2 bg-dark text-white border-secondary" required>
    <button type="submit" class="btn btn-primary btn-sm btn-block">Unlock Blog</button>
  </form>
  </div>

<!--|| FORM: POST PUBLISHER  ||-->

<!--|| BLOG POST LIST ||-->
<li class="blog-mini-post-holder clearfix rounded">
  <div class="mini-post-meta rounded-left text-center">
    <time class="meta-entry" datetime="2026-04-01T14:33:00+00:00"> <span class="day">01</span> <span class="month">APR</span> <span class="year">2026</span> <span class="time-ago mt-1" style="font-size: 9px; opacity: 0.6;"> 
      <!-- 3mo ago --> 
      3mo ago </span> </time>
    
    <!-- Blog Post List | Card Thumbnail -->
    <div class="blog-list-card__img mt-2" style="display: block; aspect-ratio: 1/1;">
            <img src="/assets/images/blog/f5b81257a7b45d838d43.jpg" 
             alt="Adiam Sibhatu" 
             loading="lazy">
          </div>
  </div>
  <div class="blog-mini-post-content">
    <h4> <a href="/articles/adiam-sibhatu.html" title="Adiam Sibhatu"> Adiam Sibhatu </a> </h4>
    <div class="blog-excerpt">
      <p>Adiam Sibhatu: is a renowned Eritrean model and actress celebrated for her glamorous beauty and striking presence. Adiam’s elegance and talent make her an icon, representing...</p>
    </div>
    <a href="/articles/adiam-sibhatu.html" class="btn-right rounded-right"> <i class="bi bi-arrow-right-short"></i> </a> </div>
</li>

<!--|| BLOG POST LIST ||-->
<li class="blog-mini-post-holder clearfix rounded">
  <div class="mini-post-meta rounded-left text-center">
    <time class="meta-entry" datetime="2026-02-01T09:44:00+00:00"> <span class="day">01</span> <span class="month">FEB</span> <span class="year">2026</span> <span class="time-ago mt-1" style="font-size: 9px; opacity: 0.6;"> 
      <!-- 3mo ago --> 
      5mo ago </span> </time>
    
    <!-- Blog Post List | Card Thumbnail -->
    <div class="blog-list-card__img mt-2" style="display: block; aspect-ratio: 1/1;">
            <img src="/assets/images/blog/0d4dd693f3b376c79115.jpg" 
             alt="System Updates" 
             loading="lazy">
          </div>
  </div>
  <div class="blog-mini-post-content">
    <h4> <a href="/articles/system-updates.html" title="System Updates"> System Updates </a> </h4>
    <div class="blog-excerpt">
      <p>Dear Fans, Today, we are taking a massive leap forward. It has been a long journey, and we are incredibly excited to welcome you back to a platform that isn’t just easier to...</p>
    </div>
    <a href="/articles/system-updates.html" class="btn-right rounded-right"> <i class="bi bi-arrow-right-short"></i> </a> </div>
</li>

<!--|| BLOG POST LIST ||-->
<li class="blog-mini-post-holder clearfix rounded">
  <div class="mini-post-meta rounded-left text-center">
    <time class="meta-entry" datetime="2025-02-25T09:44:00+00:00"> <span class="day">25</span> <span class="month">FEB</span> <span class="year">2025</span> <span class="time-ago mt-1" style="font-size: 9px; opacity: 0.6;"> 
      <!-- 1y --> 
      1y </span> </time>
    
    <!-- Blog Post List | Card Thumbnail -->
    <div class="blog-list-card__img mt-2" style="display: block; aspect-ratio: 1/1;">
            <img src="/assets/images/blog/d9ba752314583933a492.png" 
             alt="A Cleaner, Smoother, and More Elegant Website!" 
             loading="lazy">
          </div>
  </div>
  <div class="blog-mini-post-content">
    <h4> <a href="/articles/a-cleaner-smoother-and-more-elegant-website.html" title="A Cleaner, Smoother, and More Elegant Website!"> A Cleaner, Smoother, and More Elegant Website! </a> </h4>
    <div class="blog-excerpt">
      <p>We’ve improved performance, speed, and design to give you a faster, cleaner, and more elegant experience. With the introduction of dark and light mode, you can now personalize...</p>
    </div>
    <a href="/articles/a-cleaner-smoother-and-more-elegant-website.html" class="btn-right rounded-right"> <i class="bi bi-arrow-right-short"></i> </a> </div>
</li>

<!--|| BLOG POST LIST ||-->
<li class="blog-mini-post-holder clearfix rounded">
  <div class="mini-post-meta rounded-left text-center">
    <time class="meta-entry" datetime="2023-04-05T09:44:00+00:00"> <span class="day">05</span> <span class="month">APR</span> <span class="year">2023</span> <span class="time-ago mt-1" style="font-size: 9px; opacity: 0.6;"> 
      <!-- 3y ago --> 
      3y ago </span> </time>
    
    <!-- Blog Post List | Card Thumbnail -->
    <div class="blog-list-card__img mt-2" style="display: block; aspect-ratio: 1/1;">
            <img src="/assets/images/blog/f4c830b22c358314d8e2.webp" 
             alt="Dark &amp; Light Mode version Update!" 
             loading="lazy">
          </div>
  </div>
  <div class="blog-mini-post-content">
    <h4> <a href="/articles/dark-light-mode-version-update.html" title="Dark &amp; Light Mode version Update!"> Dark &amp; Light Mode version Update! </a> </h4>
    <div class="blog-excerpt">
      <p>We&#039;re excited to announce that we&#039;ve updated our website to include both dark and light mode versions. This feature provides you with a more personalized browsing experience by...</p>
    </div>
    <a href="/articles/dark-light-mode-version-update.html" class="btn-right rounded-right"> <i class="bi bi-arrow-right-short"></i> </a> </div>
</li>

<!--|| BLOG POST LIST ||-->
<li class="blog-mini-post-holder clearfix rounded">
  <div class="mini-post-meta rounded-left text-center">
    <time class="meta-entry" datetime="2023-03-05T09:44:00+00:00"> <span class="day">05</span> <span class="month">MAR</span> <span class="year">2023</span> <span class="time-ago mt-1" style="font-size: 9px; opacity: 0.6;"> 
      <!-- 3y ago --> 
      3y ago </span> </time>
    
    <!-- Blog Post List | Card Thumbnail -->
    <div class="blog-list-card__img mt-2" style="display: block; aspect-ratio: 1/1;">
            <img src="/assets/images/blog/6554ad77e2385bc7276a.png" 
             alt="SEO - Update!" 
             loading="lazy">
          </div>
  </div>
  <div class="blog-mini-post-content">
    <h4> <a href="/articles/seo-update.html" title="SEO - Update!"> SEO - Update! </a> </h4>
    <div class="blog-excerpt">
      <p>We are excited to share that we have recently updated the contents of our website to improve its SEO friendliness.

The pages that have been updated include the mp3 music page,...</p>
    </div>
    <a href="/articles/seo-update.html" class="btn-right rounded-right"> <i class="bi bi-arrow-right-short"></i> </a> </div>
</li>
<!--|| PAGINATION ||-->

<div class="pagination-wrapper" style="display: flex; justify-content: center; align-items: center; margin-top: 30px; gap: 10px;">
      <div style="display: flex; gap: 5px;">
        <a href="?&page=1"
         style="padding: 8px 14px; border-radius: 6px; text-decoration: none; font-weight: 800; font-size: 0.85rem; border: 1px solid var(--primary); background: var(--primary); color: white;"> 1 </a>
        <a href="?&page=2"
         style="padding: 8px 14px; border-radius: 6px; text-decoration: none; font-weight: 800; font-size: 0.85rem; border: 1px solid var(--glass-border); background: transparent; color: #94a3b8;"> 2 </a>
      </div>
    <a href="?&page=2" class="btn-cta" style="border-radius: 6px; padding: 10px; font-size: 0.8rem; background: rgba(255,255,255,0.05);">Next »</a>
  </div>
</ul>
    </div>